<template>
  <!-- 拆开红包页面 -->
  <div class="container">
    <!-- 填充位置-->
    <div class="openRedPacket-color"></div>
    <!-- 1.拆开红包主页面 -->
    <div class="openRedPacket-main">
      <!-- 1.2 背景图 -->
      <div class="openRedPacket-bg">
        <!-- 1.2.1标题 -->
        <div class="openRedPacket-title">
          <img src="../../../static/img/activityRedPacket/openRedPacketTitle.png"/>
        </div>
        <!-- 我的头像 -->
        <div class="openRedPacket-myAvatar">
          <img :src="this.shareUserAvatar"/>
        </div>
        <!-- 1.2.2恭喜获得红包-->
        <div class="openRedPacket-Congratulations">
          <div class="openRedPacket-honbao">
            <img src="../../../static/img/activityRedPacket/openRedPacketCongratulations.png"/>
            <p class="openRedPacket-Congratulations_p">现金红包<span>{{randomRedPacket}}</span>元快来帮我拆</p>
            <!-- 帮他拆红包-->
            <div class="openRedPacket-open-btn" @click="open_redpacket()">
              <img src="../../../static/img/activityRedPacket/openRedPacketOpenButton.png"/>
            </div>
            <!-- 我要领红包-->
            <div class="openRedPacket-get-btn" @click="get_redpacket()">
              <img src="../../../static/img/activityRedPacket/openRedPacketGetButton.png"/>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 2.帮我拆红包的人-->
    <section class="bargainSharing_section1">
      <p class="bargainSharing_section1_p">已有{{userAlreadyNumber}}人帮助拆红包</p>
      <ul>
        <li v-for="(item,index) in openActivityRedPacketUserList" :key="index">
          <p class="bargainSharing_section1_li_p"></p>
          <img :src="item.avatar"/>
          <p class="bargainSharing_section1_li_p1">{{item.nick_name}}</p>
        </li>
      </ul>
    </section>

    <!-- 3.滚动播放中红包人数据-->
    <footer class="bargainSharing_foot">
      <p class="bargainSharing_foot_p">红包领取详情</p>
      <ul>
        <li>
          <img src=""/>
          <p>0000</p>
          <p>5分钟前</p>
        </li>
        <li>
          <img src=""/>
          <p>1111</p>
          <p>10分钟前</p>
        </li>
      </ul>
    </footer>

    <!-- 4.拆开红包弹框-->
    <div class="toast" v-show="toast_control">
      <div class="toast-container">
        <div class="close" @click="close_toast()"></div>
        <div class="toast-title">
          {{toast_title}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    data(){
      return {
        toast_control: false,
        toast_title:'',
        happenTime:'',
        randomRedPacket:'',
        shareRedPacketUserNumber:'',
        openActivityRedPacketUserList:[],
        userAlreadyNumber:0,
        shareUserAvatar:'',
      }
    },
    created:function () {
      this.$emit('public_footer',false);//隐藏公用底部
    },
    mounted:function () {
      this.init_open_redpacket();//初始化拆红包的页面
    },
    methods:{
      //初始化拆红包的页面
      init_open_redpacket(){
        var url=window.location.href
        var happenTime=this.$route.query.happenTime
        var randomRedPacket=this.$route.query.randomRedPacket
        var shareRedPacketUserNumber=this.$route.query.shareRedPacketUserNumber
        var share_userid=this.$route.query.share_userid;
        this.happenTime=happenTime
        this.randomRedPacket=randomRedPacket
        this.shareRedPacketUserNumber=shareRedPacketUserNumber
        this.share_userid=share_userid
        console.log(happenTime +"----"+ randomRedPacket +"----"+ shareRedPacketUserNumber)

        //获得帮我拆红包的用户
        this.$axios.get( '/api/common/v1/activityRedPacket/openActivityRedPacketUserList?share_userid='+this.share_userid+'&happen_time='+this.happenTime,{
          params: {

          }
        }).then((res) => {
          this.openActivityRedPacketUserList=res.data
          this.userAlreadyNumber=res.data.length;
        }).catch((error) => {
          console.log(error);
        });

        //获得分享人头像
        this.$axios.get( '/api/common/v1/activityRedPacket/shareUserInfo?share_userid=66758',{
          params: {
          }
        }).then((res) => {
          this.shareUserAvatar=res.data.avatar
        }).catch((error) => {
          console.log(error);
        });
      },
      //帮他拆红包
      open_redpacket(){
        this.$axios.get( '/api/common/v1/activityRedPacket/openActivityRedPacket?share_userid=66758&register_userid=66758&happen_time='+this.happenTime,{
          params: {

          }
        }).then((res) => {
          console.log("-------11----",res)
          //提示拆红包结果
          this.toast_title=res.msg;
          this.toast_control = true;
          // 操作成功就局部刷新页面
          if(res.success){
            //获得帮我拆红包的用户
            this.$axios.get( '/api/common/v1/activityRedPacket/openActivityRedPacketUserList?share_userid=66758&happen_time='+this.happenTime,{
              params: {

              }
            }).then((res) => {
              this.openActivityRedPacketUserList=res.data
              this.userAlreadyNumber=res.data.length;
            }).catch((error) => {
              console.log(error);
            });
          }
          console.log("-----------------",res)
        }).catch((error) => {
          console.log(error);
        });
      },
      //我要领红包
      get_redpacket(){
        this.$router.push({ path: '/GetRedPacket'});
      },
      //关闭弹窗
      close_toast() {
        this.toast_control = false;
      },
    },
  }
</script>

<style scoped>
  .container {
  }
  .openRedPacket-main {
    background: url("../../../static/img/activityRedPacket/openRedPacketCongratulations.png") no-repeat center top;
    background-size: 100%;
  }
  .openRedPacket-color{
    height: 1.2rem;
    margin: 0 auto;
    background:#ff4cae;
    background-size: 100%;
  }
  .openRedPacket-bg {
    margin: 0 auto;
    background: url("../../../static/img/activityRedPacket/openRedPacketBg.png") no-repeat center top;
    background-size: 100%;
    padding-bottom: 0.4rem;
  }
  .openRedPacket-title {
    width: 80%;
    margin: 0 auto;
    position: relative;
    top:-0.9rem;
    z-index: 1;
  }
  .openRedPacket-title img{
    width: 100%;
    height: 100%;
  }
  .openRedPacket-myAvatar {
    width: 80%;
    border-radius:50%;
    margin: 0 auto;
    position: relative;
    text-align: center;
    top:-1.3rem;
    z-index: 1;
  }
  .openRedPacket-myAvatar img{
    width: 20%;
    border-radius:50%;
    height: 100%;
  }
  .openRedPacket-Congratulations {
    margin: 0 auto;
    width: 100%;
  }
  .openRedPacket-honbao{
    width: 80%;
    margin: 0 auto;
    position: relative;
    top:-1rem;
  }
  .openRedPacket-Congratulations_p span{
    color: #e7ec0e;
    font-size: 0.4rem;
  }
  .openRedPacket-honbao img{
    width: 100%;
  }
  .openRedPacket-open-btn {
    width: 60%;
    left:20% ;
    position: absolute;
    top: 2.7rem;
  }
  .openRedPacket-open-btn img{
    width: 100%
  }
  .openRedPacket-get-btn {
    width: 60%;
    left:20% ;
    position: absolute;
    top: 3.1rem;
  }
  .openRedPacket-get-btn img{
    width: 100%
  }
  .openRedPacket-CountDown{
    width: 60%;
    left:20% ;
    position: absolute;
    top: 1rem;text-align: center;
    font-weight: 600;
    font-size: 0.3rem;color: #fff;
  }
  .openRedPacket-Congratulations_p{
    width: 60%;
    left:20% ;
    position: absolute;
    top: 1.7rem;
    text-align: center;
    font-weight: 500;
    font-size: 0.17rem;
    color: #fff;
  }

  /*==================================================================*/
  .bargainSharing_section1{font-size: 0;overflow: hidden;width: 100%;border-bottom: 0.24rem solid #f7f7f7;}
  .bargainSharing_section1_p{font-size: 0.3rem;line-height: 0.84rem;border-bottom:1px solid #f7f7f7; }
  .bargainSharing_section1 ul{font-size: 0;overflow: hidden;}
  .bargainSharing_section1 ul li{float:left;width: 20%;text-align: center; }
  .bargainSharing_section1_li_p{text-align: center;font-size: 0.22rem;}
  .bargainSharing_section1 ul li img{width: 0.4rem;height: 0.4rem;border-radius: 2rem;}
  .bargainSharing_section1_li_p1{font-size: 0.12rem;color:#ec280e;}
  .bargainSharing_foot{font-size: 0;overflow: hidden;width: 7.5rem;}
  .bargainSharing_foot_p{font-size: 0.3rem;padding-left: 0.44rem;color: #000;line-height: 0.82rem;}
  .bargainSharing_foot_p span{color: #ec280e;}
  .bargainSharing_foot ul li{font-size: 0;overflow: hidden;border-bottom: 0.05rem solid #f7f7f7;width: 6.72rem;margin: 0 auto;line-height: 0.95rem;}
  .bargainSharing_foot ul li p:nth-child(2){font-size: 0.26rem;color: #a2a2a2;float: left;width: 4.54rem;padding-left: 0.24rem;}
  .bargainSharing_foot ul li p:nth-child(3){font-size: 0.26rem;color: #a2a2a2;float: left;width: 1.38rem;}
  .bargainSharing_foot ul li img{width: 0.54rem;height: 0.54rem;float: left;margin-top: 0.22rem;}
  .toast{  position: fixed;  top: 50%;  left: 50%;  z-index: 20000;  transform: translate(-50%, -50%);  width: 70%;  background: #fff;  border-radius: 0.3125rem;  padding: 0.3125rem;  background-color: rgb(252, 244, 224);  }
  .toast-container {  position: relative;  width: 100%;  height: 100%;  border: 1px dotted #fccc6e;  }
  .close{  position: absolute;  top: -0.5rem;  right: -0.5rem;  width: 0.8rem;  height:0.8rem;  background: url("../../../static/img/luckyDraw/close_store.png") no-repeat center top;  background-size: 100%;  }
  .toast-title {    font-size: 0.3rem;  color: #fc7939;  text-align: center;  }
  .toast-btn {  display: flex;  align-items: center;  justify-content: center;  margin-bottom: 0.9375rem;  }
  .toast-btn div {  background-image: -moz-linear-gradient(-18deg, rgb(242, 148, 85) 0%, rgb(252, 124, 88) 51%, rgb(252, 124, 88) 99%);  }
</style>
